<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓库管理API测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .test-section {
            margin-bottom: 30px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }

        .test-section h3 {
            margin-top: 0;
            color: #333;
        }

        .api-test {
            margin: 10px 0;
            padding: 10px;
            background: #f9f9f9;
            border-radius: 4px;
        }

        .api-test button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }

        .api-test button:hover {
            background: #0056b3;
        }

        .result {
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
        }

        .success {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }

        .error {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }

        .loading {
            background: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }

        .status {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
        }

        .status.success {
            background: #28a745;
        }

        .status.error {
            background: #dc3545;
        }

        .status.loading {
            background: #ffc107;
        }

        .status.pending {
            background: #6c757d;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>🏭 仓库管理系统API测试</h1>
        <p>此页面用于快速测试仓库管理系统的API连接状态和功能。</p>

        <div class="test-section">
            <h3>📊 数据字典API测试</h3>

            <div class="api-test">
                <span class="status pending" id="status-category"></span>
                <strong>仓库分类API:</strong>
                <button onclick="testAPI('category')">测试</button>
                <div id="result-category" class="result" style="display:none;"></div>
            </div>

            <div class="api-test">
                <span class="status pending" id="status-storage"></span>
                <strong>存储类型API:</strong>
                <button onclick="testAPI('storage')">测试</button>
                <div id="result-storage" class="result" style="display:none;"></div>
            </div>

            <div class="api-test">
                <span class="status pending" id="status-structure"></span>
                <strong>仓库结构API:</strong>
                <button onclick="testAPI('structure')">测试</button>
                <div id="result-structure" class="result" style="display:none;"></div>
            </div>

            <div class="api-test">
                <span class="status pending" id="status-person"></span>
                <strong>人员信息API:</strong>
                <button onclick="testAPI('person')">测试</button>
                <div id="result-person" class="result" style="display:none;"></div>
            </div>
        </div>

        <div class="test-section">
            <h3>🏪 仓库管理API测试</h3>

            <div class="api-test">
                <span class="status pending" id="status-warehouse-list"></span>
                <strong>仓库列表API:</strong>
                <button onclick="testAPI('warehouse-list')">测试</button>
                <div id="result-warehouse-list" class="result" style="display:none;"></div>
            </div>

            <div class="api-test">
                <span class="status pending" id="status-warehouse-create"></span>
                <strong>新增仓库API:</strong>
                <button onclick="testAPI('warehouse-create')">测试</button>
                <div id="result-warehouse-create" class="result" style="display:none;"></div>
            </div>
        </div>

        <div class="test-section">
            <h3>⚡ 批量测试</h3>
            <button onclick="runAllTests()" style="background: #28a745; padding: 12px 24px; font-size: 16px;">
                运行所有测试
            </button>
            <div id="result-all" class="result" style="display:none;"></div>
        </div>
    </div>

    <script>
        const API_BASE = 'http://localhost:5107';
        const APIs = {
            'category': '/api/WarehouseCategory/list',
            'storage': '/api/StorageType/list',
            'structure': '/api/WarehouseStructure/list',
            'person': '/api/Person/list',
            'warehouse-list': '/api/Warehouse/list?page=1&pageSize=5',
            'warehouse-create': '/api/Warehouse'
        };

        function updateStatus(testId, status) {
            const statusEl = document.getElementById(`status-${testId}`);
            statusEl.className = `status ${status}`;
        }

        function showResult(testId, result, isSuccess) {
            const resultEl = document.getElementById(`result-${testId}`);
            resultEl.textContent = result;
            resultEl.className = `result ${isSuccess ? 'success' : 'error'}`;
            resultEl.style.display = 'block';
        }

        async function testAPI(testId) {
            updateStatus(testId, 'loading');

            try {
                const url = API_BASE + APIs[testId];
                let options = {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                };

                // 如果是新增仓库测试，使用POST方法
                if (testId === 'warehouse-create') {
                    options.method = 'POST';
                    options.body = JSON.stringify({
                        warehouseName: '测试仓库',
                        categoryId: 1,
                        isEnabled: true,
                        isSystemNumber: true
                    });
                }

                const response = await fetch(url, options);
                const data = await response.json();

                const result = `状态码: ${response.status}\n响应数据: ${JSON.stringify(data, null, 2)}`;

                if (response.ok && data.code === 200) {
                    updateStatus(testId, 'success');
                    showResult(testId, result, true);
                } else {
                    updateStatus(testId, 'error');
                    showResult(testId, result, false);
                }
            } catch (error) {
                updateStatus(testId, 'error');
                showResult(testId, `错误: ${error.message}`, false);
            }
        }

        async function runAllTests() {
            const resultEl = document.getElementById('result-all');
            resultEl.style.display = 'block';
            resultEl.className = 'result loading';
            resultEl.textContent = '正在运行所有测试...\n';

            const tests = Object.keys(APIs);
            let successCount = 0;
            let totalCount = tests.length;

            for (const testId of tests) {
                try {
                    updateStatus(testId, 'loading');
                    const url = API_BASE + APIs[testId];

                    let options = {
                        method: 'GET',
                        headers: {
                            'Content-Type': 'application/json'
                        }
                    };

                    if (testId === 'warehouse-create') {
                        options.method = 'POST';
                        options.body = JSON.stringify({
                            warehouseName: '测试仓库',
                            categoryId: 1,
                            isEnabled: true,
                            isSystemNumber: true
                        });
                    }

                    const response = await fetch(url, options);
                    const data = await response.json();

                    if (response.ok && data.code === 200) {
                        updateStatus(testId, 'success');
                        successCount++;
                        resultEl.textContent += `✅ ${testId}: 成功\n`;
                    } else {
                        updateStatus(testId, 'error');
                        resultEl.textContent += `❌ ${testId}: 失败 (${response.status})\n`;
                    }
                } catch (error) {
                    updateStatus(testId, 'error');
                    resultEl.textContent += `❌ ${testId}: 错误 (${error.message})\n`;
                }
            }

            resultEl.textContent += `\n📊 测试结果: ${successCount}/${totalCount} 成功`;
            resultEl.className = `result ${successCount === totalCount ? 'success' : 'error'}`;
        }

        // 页面加载时自动运行所有测试
        window.onload = function () {
            setTimeout(runAllTests, 1000);
        };
    </script>
</body>

</html>